@import "../../../common/common.less";
.GRoleDetail{
  .baseInfo{
    margin-bottom: 12px;
    .roleInfo{
      width: 70%;
      margin: 24px auto;
      .roleItem{
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .roleItemTitle{
          flex: 0 0 72px;
          text-align: right;
          margin-right: 16px;
        }
        .roleItemContent{
          flex: auto;
        }
        &.remark{
          align-items: flex-start;
        }
      }
    }
    .roleContent{
      position: relative;
      border-top: 1px solid @borderColor;
      .roleListHeader{
        position: absolute;
        top: 24px;
        left: 24px;
        font-weight: bold;
      }
      .roleList{
        overflow: hidden;
        .roleItem{
          display: flex;
        }
        .roleTitle{
          position: relative;
          width: 70%;
          margin: 0 auto;
          padding: 24px 0;
          font-weight: bold;
          &:before{
            content: '';
            position: absolute;
            bottom: 0;
            left: -30%;
            width: 200%;
            height: 1px;
            background: @borderColor;
          }
          .menu_1, .menu_2{
            flex: 0 0 160px;
          }
          .menu_3{
            flex: auto;
          }
        }
        .menuLv1Content{
          display: flex;
          position: relative;
          width: 70%;
          margin: 0 auto;
          padding: 24px 0 0;
          &:before{
            content: '';
            position: absolute;
            bottom: 0;
            left: -30%;
            width: 200%;
            height: 1px;
            background: @borderColor;
          }
          .menuLv1{
            flex: 0 0 160px;
          }
          .menuLv2Content{
            flex: auto;
            .menuLv2{
              .menuLv2Check{
                flex: 0 0 160px;
                margin-bottom: 24px;
              }
              &:last-child{
                margin-bottom: 0;
              }
              .menuLv3Content{
                display: flex;
                flex-wrap: wrap;
                .menuLv3{
                  margin-bottom: 24px;
                  margin-right: 44px;
                }
              }
            }
          }
        }
      }
    }
    .btnArea{
      padding: 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .zy-btn{
        margin-left: 12px;
      }
    }
  }
}
